วิธีการแสดงผลเว็บไซต์ที่สร้างจาก EC2 ด้วย CloudFront

วิธีการแสดงผลเว็บไซต์ที่สร้างจาก EC2 ด้วย CloudFront

Amazon CloudFront สามารถดึงข้อมูลจาก EC2 มาแสดงผลบนเว็บไซต์ได้ ซึ่งในบทความนี้จะเป็นการอธิบายเกี่ยวกับการดึงข้อมูล EC2 มาแสดงผลเว็บไซต์ สามารถเข้ามาศึกษาจากบทความนี้ได้เลยครับ
Clock Icon2021.10.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ครั้งนี้ ผมจะมาเขียนบทความเกี่ยวกับการแสดงผลเว็บไซต์ผ่าน Amazon CloudFront

Amazon CloudFront

Amazon CloudFront เป็น Web Cache Server ใช้แคชข้อมูลในการแสดงผล ทำให้สามารถเพิ่มความเร็วของการแสดงผลด้วยการแสดงเนื้อหาที่แคชบันทึกไว้จนกว่าแคชจะหมดอายุ ซึ่ง CloudFront จะบันทึกข้อมูลลงแคชไฟล์ โดยแคชไฟล์จะถูกเก็บอยู่ใน Edge location ต่างๆ ทั่วโลก เมื่อมีการเรียกใช้งานเว็บไซต์ ระบบจะดึงแคชไฟล์จาก Edge location ที่ใกล้ที่สุดมาแสดงผล

โดยมีการแสดงผลข้อมูลจากเซิร์ฟเวอร์ที่ใกล้กับผู้ใช้งานมากที่สุดเพื่อความรวดเร็วไม่ว่าเราจะอยู่ส่วนใดของโลกก็ตาม

EC2-CloudFront-Global ><

สิ่งที่ต้องมี

1. EC2 Instance

EC2-Instance-HTTP-connection ><
ก่อนที่จะทำการแสดงผลเว็บไซต์ด้วย Amazon CloudFront ต้องทำการสร้าง EC2 Instance ของเราเองขึ้นมาก่อน สำหรับเพื่อนๆ ที่ยังไม่มี EC2 Instance สามารถทำตามลิงก์ด้านล่างนี้ได้เลย

หลังจากทำขั้นตอนการสร้าง Instance และทำการเชื่อมโยง Elastic IP เรียบร้อยแล้ว ให้ทำการ Install PHP 8.0 ตามขั้นตอนในลิงก์ถัดไปได้เลย

ในกรณีที่ต้องการทำการแสดงผลไฟล์ Static โดยใช้ S3 ให้ดูวิธีการที่ลิงก์ด้านล่างนี้ได้เลย

2. เป้าหมายการทำ Amazon CloudFront

CloudFront-EC2-instance-http ><
ถ้าทำตามขั้นตอนของ EC2 Instance เสร็จแล้ว เรามาเริ่มทำการแสดงผลเว็บไซต์ผ่าน Amazon CloudFront ตามขั้นตอนในหัวข้อถัดไปได้เลย

การแสดงผลเว็บไซต์ผ่าน Amazon CloudFront

1. สร้าง Distribution ด้วย CloudFront

ก่อนอื่นให้ทำการ Copy Public IPv4 DNS Instance-DNS

ไปที่ช่องค้นหา พิมพ์คำว่า?︎ CloudFront» เลือกCloudFront
CF-1

คลิกCreate distribution
CF-2

ในส่วนของ Origin ให้วาง Public IPv4 DNS ที่ช่อง Origin domain
แล้ว Protocol จะแสดงขึ้นมาด้านล่างอัตโนมัติ ให้เลือก HTTP only แล้วจะได้ HTTP port: 80 ตามนี้ CF-3

ในส่วนของ Default cache behavior ตั้งค่าตามนี้
Viewer
» Viewer protocol policy: ⦿Redirect HTTP to HTTPS
» Allowed HTTP methods: ⦿GET, HEAD, OPTIONS, PUT, POST PATCH, DELETE
CF-4
Viewer
Viewer protocol policy จะมีลักษณะการเชื่อมต่อดังนี้

  • HTTP and HTTPS (จะไม่มีการเปลี่ยนแปลงระหว่างการเชื่อมต่อ)
    • HTTP  → HTTP
    • HTTPS → HTTPS
  • Redirect HTTP to HTTPS (จะมีการเปลี่ยนแปลงระหว่างการเชื่อมต่อโดยอัตโนมัติ)
    • HTTP  → HTTPS
    • HTTPS → HTTPS
  • HTTPS only (จะไม่สามารถเชื่อมต่อได้)
    • HTTP  → ✕
    • HTTPS → ✓

       

» เลือก Cache policy:CachingDisabled ▼
» เลือก Origin request policy:AllViewer ▼
CF-4-1-fix Cache policy:CachingDisabled= เป็นการปิดการใช้งาน Cache เพราะเว็บไซต์นี้ เป็นเว็บไซต์แบบ Dynamic หรือเป็นเว็บไซต์ที่มีการเปลี่ยนแปลงข้อมูลตลอดเวลา

เลื่อนลงมาด้านล่างสุด Description - optional:ec2-tinnakorn(ใส่ชื่ออะไรก็ได้) » คลิกCreate distribution
CF-5
หมายเหตุ: การตั้งค่าที่ไม่ได้อธิบายทั้งหมดนี้จะใช้ค่าเริ่มต้น

 

เมื่อสร้างเสร็จเรียบร้อยแล้วจะได้หน้าตาแบบนี้
CF-6

จากนั้นให้เรารอจนกว่า Status จะเปลี่ยนเป็น Deployed ซึ่งจะใช้เวลาประมาณ 3 นาทีในการ Deploy CF-7

2. ตรวจสอบการแสดงผลเว็บไซต์ด้วย URL (Domain name) ที่สร้างจาก CloudFront

หลังจาก Status เป็น Deployed เรียบร้อยแล้ว ให้เราทำการ Copy URL (Domain name) เพื่อนำไป Test ที่ Web browser
CF-8

ตอนนี้เราก็ได้ทำการ Deploy เว็บไซต์ของเราขึ้นไปบน AWS โดยใช้ Amazon CloudFront เรียบร้อยแล้ว

https://d3**********ig.cloudfront.net/

CF-9

สรุป

การแสดงผลเว็บไซต์ผ่าน Amazon CloudFront จะช่วยให้เว็บไซต์มีความเร็ว และปลอดภัยกว่าการใช้ IP Address ที่ EC2 สร้างขึ้นให้โดยอัตโนมัติ

บทความที่เกี่ยวข้อง

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.